<template>
  <div class="f-columnY container">
    <el-form 
      :inline="true" 
      :model="formInline" 
      ref="header"
      class="f-flex header"
      label-width="100px"
      size="small">
      <el-form-item label="位置:">
        <tree-select ref="treeSelect"
          :data="officeTreeList"
          :el="'formInline.deptId'"
          placeholder="请选择位置"
          :defaultProps="defaultProps"
          :default-expand-all="false"
          @parent-event="popoverHide"
          multiple
          clearable
          :clear="clearTreeSelect"
          :nodeKey="nodeKey"
          :checkedKeys="defaultCheckedKeys"
          @popoverHide="popoverHide">
        </tree-select>
      </el-form-item>
      <el-form-item label="系统:">
        <el-select
          v-model="formInline.value2"
          multiple
          collapse-tags
          style="margin-left: 20px;"
          placeholder="请选择">
          <el-option
            v-for="item in this.$config.selectList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="f-flex1 f-columnY content">
      <div class="f-flex1 map">
        
      </div>
      <div :class="['list', {'list-hidden': listMessage}]">
        <span class="collapse" @click="handleCollapse">
          <svg-icon icon-class="emap_arrow_bottom" class-name="icon"></svg-icon>
        </span>
        <p v-if="!listMessage" class="split"></p>
        <list v-if="!listMessage"></list>
      </div>
    </div>
  </div>
</template>

<script>
import TreeSelect from '@/components/TreeSelect'
import List from './List'
export default {
  components: {
    TreeSelect,
    List
  },
  data() {
    return {
      listMessage: false,
      formInline: {
        deptId: [],
        value2: []
      },
      defaultProps: {
        parent: 'parentId',   // 父级唯一标识
        value: 'id',          // 唯一标识
        label: 'label',       // 标签显示
        children: 'children', // 子级
      },
      isShowSelect: false,//选择面板，默认隐藏
      officeTreeList: this.$config.treeList,//树形结构数据
      selectedOfficeIds: '',//选择后返回的选中id，以逗号拼接
      selectedOffices: [],//选择后返回的选中对象，
      clearTreeSelect: 0,
      nodeKey: "id",//树形结构数据中对应的属性名称，可改为自己数据中属性
      defaultCheckedKeys: [],//默认初次选中的数据
    }
  },
  methods: {
    popoverHide (checkedIds, checkedData, el) {
      if (el) {
        eval( ' ( this.' + el +' = checkedIds) ' )
      }
    },
    // 是否折叠信息列表
    handleCollapse() {
      this.listMessage = !this.listMessage
    }

  }
}
</script>


<style lang="scss" scoped>
@import '~styles/mixin.scss';
.container {
  height: 100%;
  .header {
    padding-top: 16px;
  }
  .content {
    margin: 0 10px;
    padding: 10px 10px;
    .map {
      background: url('~images/bg_images/login.jpg') no-repeat center center;
      background-size: contain;
      border: 1px solid #ebeef5;
      box-shadow: 0px 0px 8px #ebeef5;
    }
    .list {
      overflow: hidden;
      position: relative;
      height: 200px;
      @include transition(all, 1s);
      .split {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 1px;
        height: 120px;
        border: 1px solid #EDF1F2;
      }
      .collapse {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
        .icon {
          font-size: 30px;
          transform: rotate(0deg);
          @include transition(all, .3s);
        }
      }
    }
    .list-hidden {
      height: 30px;
      @include transition(all, 1s);
      .collapse {
        position: absolute;
        right: 10px;
        top: 0px;
        cursor: pointer;
        .icon {
          font-size: 30px;
          transform: rotate(180deg);
          @include transition(all, .3s);
        }
      }
    }
  }
}
</style>

